<template>
  <view class="cunba-nav-bar" :class="{ navigating: navigating }">
    <view 
      class="nav-item" 
      :class="{ active: activeIndex === index }" 
      v-for="(item, index) in navList" 
      :key="index"
      @click="onNavClick(index)"
    >
      <view class="nav-icon-wrapper">
        <image 
          class="nav-icon" 
          :src="activeIndex === index ? item.selectedIcon : item.icon" 
          mode="aspectFit"
        ></image>
        <!-- 角标 -->
        <view v-if="getBadgeCount(index) > 0" class="nav-badge">
          <text class="badge-text">{{ getBadgeCount(index) > 99 ? '99+' : getBadgeCount(index) }}</text>
        </view>
      </view>
      <text class="nav-text" :class="{ active: activeIndex === index }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CunbaNavBar',
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    // 支持外部传入角标数据
    badges: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      navigating: false, // 导航状态
      navList: [
        {
          text: '首页',
          icon: '/static/images/ball.png',
          selectedIcon: '/static/images/ball_selected.png',
          path: '/pages/cunba/index/index'
        },
        {
          text: '赛程',
          icon: '/static/images/tyc.png',
          selectedIcon: '/static/images/tyc_selected.png',
          path: '/pages/cunba/calendar/index'
        },
        {
          text: '球队',
          icon: '/static/images/team.png',
          selectedIcon: '/static/images/team_selected.png',
          path: '/pages/cunba/ranking/index'
        },
        {
          text: '我的',
          icon: '/static/images/mine.png',
          selectedIcon: '/static/images/mine_selected.png',
          path: '/pages/cunba/mine/index'
        }
      ]
    }
  },
  methods: {
    // 获取指定导航项的角标数量
    getBadgeCount(index) {
      const navKeys = ['home', 'schedule', 'team', 'mine']
      const key = navKeys[index]
      return this.badges[key] || 0
    },
    
    onNavClick(index) {
      // 防止重复点击
      if (this.navigating) {
        return
      }
      
      // 添加触觉反馈
      // #ifdef APP-PLUS
      uni.vibrateShort({
        type: 'light'
      })
      // #endif
      
      if (index === this.activeIndex) {
        return // 如果点击的是当前页面，不执行跳转
      }
      
      const targetPage = this.navList[index]
      
      // 设置导航状态
      this.navigating = true
      
      // 发射事件给父组件
      this.$emit('nav-change', {
        index,
        path: targetPage.path,
        item: targetPage
      })
      
      // 执行页面跳转（无动画）
      if (targetPage.path) {
        this.navigateWithoutAnimation(targetPage.path)
      }
    },
    
    // 无动画跳转方法
    navigateWithoutAnimation(url) {
      // 优先使用redirectTo，因为它没有动画效果
      uni.redirectTo({
        url: url,
        success: () => {
          this.navigating = false
        },
        fail: () => {
          // 如果是tabBar页面，使用switchTab
          uni.switchTab({
            url: url,
            success: () => {
              this.navigating = false
            },
            fail: () => {
              // 最后尝试navigateTo，但禁用动画
              this.navigateToWithoutAnimation(url)
            }
          })
        }
      })
    },
    
    // navigateTo无动画版本
    navigateToWithoutAnimation(url) {
      const options = {
        url: url,
        success: () => {
          this.navigating = false
        },
        fail: () => {
          this.navigating = false
          console.error('页面跳转失败:', url)
        }
      }
      
      // 根据平台添加无动画配置
      // #ifdef APP-PLUS
      options.animationType = 'none'
      options.animationDuration = 0
      // #endif
      
      // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
      // 小程序平台暂时没有禁用动画的API，但可以设置最短时间
      options.animationDuration = 1
      // #endif
      
      uni.navigateTo(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.cunba-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #fff;
  display: flex;
  border-top: 1px solid #e0e0e0;
  z-index: 999;
  // 添加安全区域适配
  padding-bottom: env(safe-area-inset-bottom);
  
  &.navigating {
    pointer-events: none;
    opacity: 0.8;
  }
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .nav-icon-wrapper {
      position: relative;
      margin-bottom: 4px;
      
      .nav-icon {
        width: 24px;
        height: 24px;
        transition: all 0.3s ease;
      }
      
      .nav-badge {
        position: absolute;
        top: -5px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        background: #ff4757;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        animation: badge-appear 0.3s ease-out;
        transform-origin: center;
        
        .badge-text {
          color: #fff;
          font-size: 10px;
          font-weight: bold;
          line-height: 1;
          padding: 0 3px;
        }
      }
    }
    
    .nav-text {
      font-size: 12px;
      color: #999;
      transition: color 0.3s ease;
      
      &.active {
        color: #4A90E2;
        font-weight: 500;
      }
    }
    
    &.active {
      .nav-icon-wrapper .nav-icon {
        transform: scale(1.1);
      }
    }
  }
}

// 角标出现动画
@keyframes badge-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

// 为使用该导航栏的页面预留底部空间
.page-with-cunba-nav {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

// 禁用页面切换动画（H5平台）
// #ifdef H5
.uni-page-wrapper {
  transition: none !important;
  animation: none !important;
}

.uni-page-body {
  transition: none !important;
  animation: none !important;
}
// #endif
</style>
